import React from 'react';
import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  UserOutlined,
  TeamOutlined,
  AppstoreOutlined,
  SafetyCertificateOutlined,
  SettingOutlined
} from '@ant-design/icons';
import styles from './layout.module.css';

const { Header, Sider, Content } = Layout;

const AdminLayout = ({ children }: { children: React.ReactNode }) => {
  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: 'users',
      icon: <UserOutlined />,
      label: '用户管理',
      children: [
        {
          key: 'admin-users',
          label: '管理员',
        },
        {
          key: 'creator-users',
          label: '创作者',
        },
        {
          key: 'child-users',
          label: '儿童用户',
        },
        {
          key: 'parent-users',
          label: '家长用户',
        },
      ],
    },
    {
      key: 'roles',
      icon: <TeamOutlined />,
      label: '角色权限',
      children: [
        {
          key: 'role-list',
          label: '角色列表',
        },
        {
          key: 'permissions',
          label: '权限管理',
        },
      ],
    },
    {
      key: 'content',
      icon: <AppstoreOutlined />,
      label: '内容管理',
      children: [
        {
          key: 'courses',
          label: '课程管理',
        },
        {
          key: 'activities',
          label: '活动管理',
        },
        {
          key: 'resources',
          label: '资源库',
        },
      ],
    },
    {
      key: 'security',
      icon: <SafetyCertificateOutlined />,
      label: '安全管理',
      children: [
        {
          key: 'audit-logs',
          label: '审计日志',
        },
        {
          key: 'security-settings',
          label: '安全设置',
        },
      ],
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置',
    },
  ];

  return (
    <Layout className={styles.container}>
      <Sider width={256} className={styles.sider}>
        <div className={styles.logo}>儿童创想乐园</div>
        <Menu
          mode="inline"
          defaultSelectedKeys={['dashboard']}
          items={menuItems}
          className={styles.menu}
        />
      </Sider>
      <Layout>
        <Header className={styles.header}>
          {/* Add header content like user info, notifications, etc. */}
        </Header>
        <Content className={styles.content}>
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout; 